<!-- eslint-disable max-len -->
<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme">
    <module-header name="app" value="/patient" is-telescreen />
    <main-content>
      <div class="content-wrapper flex justify-center flex-wrap flex-row">
        <div class="flex flex-col items-center">
          <div class="text-white text-2xl">报到</div>
          <div class="fctCard" @click="shrinkBack(0)">
            <div class="svg">
              <svg id="svg-digital-tool" width="180" height="180" viewBox="0 0 200 200">
                <g id="svg-digital-tool-g-01">
                  <circle class="cls-1" cx="97" cy="124.65" r="14.78" />
                  <rect class="cls-2" x="72.58" y="42.67" width="46.13" height="86.49" rx="5.77" ry="5.77" />
                  <rect class="cls-3" x="92.77" y="47.71" width="5.77" height="1.44" />
                  <circle class="cls-3" cx="95.65" cy="123.39" r="2.9" />
                  <rect class="cls-1" x="95.65" y="130.02" width="31.71" height="26.15" />
                  <rect class="cls-4" x="75.47" y="54.2" width="40.36" height="63.43" />
                </g>
                <g id="svg-digital-tool-g-02">
                  <rect class="cls-5" x="90" y="90" width="15" height="15" rx="2" ry="2" />
                </g>
                <g id="svg-digital-tool-g-03">
                  <rect class="cls-5" x="78.21" y="76.21" width="10" height="10" rx="2" ry="2" />
                  <rect class="cls-5" x="90.74" y="76.21" width="10" height="10" rx="2" ry="2" />
                  <rect class="cls-5" x="78.21" y="60.99" width="10" height="10" rx="2" ry="2" />
                  <rect class="cls-5" x="90.74" y="60.99" width="10" height="10" rx="2" ry="2" />
                  <rect class="cls-5" x="103.27" y="60.99" width="10" height="10" rx="2" ry="2" />
                  <rect class="cls-5" x="103.27" y="76.21" width="10" height="10" rx="2" ry="2" />
                </g>
                <g id="svg-digital-tool-g-04">
                  <path class="cls-1"
                        d="M121.6,118.34a5.76,5.76,0,0,0,5.77-5.77V112.3c0-3.65,0-13.36,3.8-19.39a5.77,5.77,0,0,0-9.76-6.15c-5.58,8.86-5.58,20.55-5.57,25.55v0.27A5.77,5.77,0,0,0,121.6,118.34Z"
                  />
                </g>
                <g id="svg-digital-tool-g-05">
                  <circle class="cls-1" cx="72.58" cy="94.42" r="5.77" />
                  <circle class="cls-1" cx="72.58" cy="82.76" r="5.77" />
                  <circle class="cls-1" cx="72.58" cy="105.96" r="5.77" />
                  <path class="cls-1" d="M127.36,106.09v23.06H104.3A23.06,23.06,0,0,1,127.36,106.09Z" />
                  <circle class="cls-1" cx="115.83" cy="129.16" r="11.53" />
                  <circle class="cls-1" cx="72.58" cy="117.49" r="5.77" />
                </g>
              </svg>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center">
          <div class="text-white text-2xl">当前流程</div>
          <div class="fctCard" @click="shrinkBack(1)">
            <div class="svg">
              <svg id="svg-corporate-site" width="180" height="180" viewBox="0 0 200 200">
                <g id="svg-corporate-site-g-01">
                  <polygon class="cls-1"
                           points="36.34 106.52 36.36 96.77 102.85 77.45 102.75 127.04 61.92 114.45 63.69 134.85 52.08 134.83 48.03 110.15 36.34 106.52"
                  />
                  <rect class="cls-2" x="76.07" y="100.31" width="57.32" height="3.87"
                        transform="translate(2.27 206.77) rotate(-89.88)"
                  />
                </g>
                <g id="svg-corporate-site-g-02">
                  <path class="cls-3" d="M126,122.51a31.14,31.14,0,0,0-2-44" />
                  <path class="cls-3" d="M137.45,133a46.71,46.71,0,0,0-3-66" />
                </g>
                <g id="svg-corporate-site-g-03">
                  <path class="cls-4" d="M126,122.51a31.14,31.14,0,0,0-2-44" />
                  <path class="cls-4" d="M137.45,133a46.71,46.71,0,0,0-3-66" />
                  <path class="cls-4" d="M147.92,142.89A60.72,60.72,0,0,0,144,57.11" />
                </g>
              </svg>
            </div>
          </div>
        </div><div class="flex flex-col items-center">
          <div class="text-white text-2xl">历史流程</div>
          <div class="fctCard" @click="shrinkBack(2)">
            <div class="svg">
              <svg id="svg-articles" width="180" height="180" viewBox="0 0 200 200">
                <defs>
                  <clipPath id="svg-articles-clip">
                    <rect x="59.77" y="68" width="80" height="52" />
                  </clipPath>
                </defs>
                <g id="svg-articles-g-01">
                  <path class="cls-1" d="M47.6,122v12a4,4,0,0,0,4,4h96a4,4,0,0,0,4-4V122H47.6Z" />
                  <polygon class="cls-2" points="115.6 154.01 83.6 154.01 87.6 130.01 111.6 130.01 115.6 154.01" />
                  <rect class="cls-3" x="79.6" y="152.01" width="40" height="2" />
                  <path class="cls-4" d="M147.6,62h-96a4,4,0,0,0-4,4v56h104V66a4,4,0,0,0-4-4h0Z" />
                  <polygon class="cls-5" points="147.6 66.01 147.6 118.01 51.6 118.01 51.6 66.01 147.6 66.01 147.6 66.01" />
                  <path class="cls-3" d="M47.6,122v12a4,4,0,0,0,4,4h96a4,4,0,0,0,4-4V122H47.6Z" />
                  <circle class="cls-4" cx="99.6" cy="130.01" r="2" />
                  <rect class="cls-6" x="59.77" y="66.01" width="80" height="52" />
                </g>
                <g clip-path="url(#svg-articles-clip)">
                  <g id="svg-articles-g-02">
                    <rect class="cls-7" x="62.59" y="35.93" width="22.62" height="6.78" />
                    <rect class="cls-8" x="88.76" y="35.93" width="49.34" height="6.78" />
                    <rect class="cls-8" x="62.04" y="74.2" width="76.06" height="2.24" />
                    <rect class="cls-8" x="62.04" y="79.09" width="76.06" height="2.23" />
                    <rect class="cls-8" x="62.04" y="83.76" width="76.06" height="2.23" />
                    <rect class="cls-8" x="62.04" y="88.44" width="76.06" height="2.23" />
                    <rect class="cls-8" x="62.04" y="116.61" width="76.06" height="2.24" />
                    <rect class="cls-8" x="62.04" y="121.5" width="76.06" height="2.23" />
                    <rect class="cls-8" x="62.04" y="126.18" width="76.06" height="2.23" />
                    <rect class="cls-8" x="62.04" y="130.86" width="76.06" height="2.23" />
                    <rect class="cls-8" x="62.04" y="93.28" width="43.38" height="2.23" />
                    <rect class="cls-8" x="62.04" y="98.12" width="43.38" height="2.23" />
                    <rect class="cls-8" x="62.04" y="102.96" width="43.38" height="2.23" />
                    <rect class="cls-8" x="94.88" y="136.05" width="43.38" height="2.23" />
                    <rect class="cls-8" x="94.88" y="140.89" width="43.38" height="2.23" />
                    <rect class="cls-8" x="94.88" y="145.73" width="43.38" height="2.23" />
                    <rect class="cls-7" x="62.04" y="108.91" width="76.06" height="6" />
                    <polyline class="cls-9" points="62.59 46.53 62.59 70.2 136.8 70.2" />
                    <polyline class="cls-10" points="72.3 65.31 89.21 63.81 99.97 54.12 114.29 57.18 128.78 51.42" />
                    <circle class="cls-11" cx="89.14" cy="63.47" r="2" />
                    <circle class="cls-11" cx="100.07" cy="53.99" r="2" />
                    <circle class="cls-11" cx="114.57" cy="57.32" r="2" />
                    <circle class="cls-11" cx="128.78" cy="51.99" r="2" />
                    <circle class="cls-11" cx="72.3" cy="65.31" r="2" />
                    <rect class="cls-8" x="107.89" y="93.23" width="30" height="12" />
                    <rect class="cls-11" x="62.04" y="136.01" width="30" height="12" />
                  </g>
                </g>
              </svg>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center">
          <div class="text-white text-2xl">个人信息</div>
          <div class="fctCard relative" @click="shrinkBack(3)">
            <div class="svg absolute flex justify-center items-center">
              <svg id="svg-medical-square" class="" width="180" height="180">
                <g id="svg-medical-square-g-01">
                  <polygon class="cls-1"
                           points="60.22 140.82 31.02 90.24 60.22 39.67 118.62 39.67 147.81 90.24 118.62 140.82 60.22 140.82"
                  />
                  <path class="cls-2" d="M116.62,43.14v94.22L35,90.24l81.59-47.11m2-3.46L31,90.24l87.59,50.57V39.67h0Z" />
                  <path class="cls-2"
                        d="M62.22,43.14l81.59,47.11L62.22,137.35V43.14m-2-3.46V140.82l87.59-50.57L60.22,39.67h0Z"
                  />
                  <line class="cls-1" x1="118.62" y1="39.67" x2="61.12" y2="139.28" />
                  <line class="cls-1" x1="60.22" y1="39.67" x2="118.62" y2="140.82" />
                  <line class="cls-1" x1="31.46" y1="90.83" x2="147.81" y2="90.24" />
                  <circle class="cls-3" cx="146.44" cy="90" r="8" />
                  <circle class="cls-4" cx="31.46" cy="90.49" r="8" />
                  <circle class="cls-3" cx="61.12" cy="39.67" r="8" />
                  <circle class="cls-4" cx="118.62" cy="39.67" r="8" />
                  <circle class="cls-4" cx="118.62" cy="140.82" r="8" />
                  <circle class="cls-3" cx="60.22" cy="140.82" r="8" />
                </g>
                <g id="svg-medical-square-g-02">
                  <circle class="cls-5" cx="89.42" cy="90.24" r="28.67" />
                </g>
              </svg>
              <svg t="1716886533150" class="icon cls-6 absolute " viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7925" width="40" height="40"><path d="M880.864 704.346c-56.813-25.397-141.118-90.818-265.945-113.298 31.924-34.36 56.084-88.097 80.937-151.754 14.403-36.893 11.935-68.343 11.935-113.121 0-33.073 6.193-86.156-1.97-115.329-27.533-98.59-97.1-125.79-178.61-125.79-81.577 0-151.229 27.328-178.71 126.087-8.097 29.083-1.888 82.044-1.888 115.037 0 44.875-2.422 76.432 12.019 113.383 25.044 63.984 48.854 117.644 80.655 151.86-123.826 22.89-207.498 87.822-263.95 113.138C58.523 756.945 57.95 814.296 57.95 814.296v97.42l940.724-0.112v-97.308s-0.547-57.548-117.809-109.95z" p-id="7926" fill="#ffffff" /></svg>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center">
          <div class="text-white text-2xl">退出登录</div>
          <div class="fctCard" @click="shrinkBack(4)"
               @mouseover="currentSrc = dynamicGif"
               @mouseout="currentSrc = staticGif"
          >
            <img style="width: 100px;" :src="currentSrc">
          </div>
        </div>
      </div>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider } from 'naive-ui'
import { nav, setToken, setRole } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr, actOK } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import { reqReport } from './patient.def'

//图标
const dynamicGif = '../../../public/icons8-sign-out.gif'
const staticGif = '../../../public/static-sign-out.gif'
const currentSrc = ref('../../../public/static-sign-out.gif')

const FunctionTitle = reactive({
  data: ['报到', '当前<br>流程', '历史<br>流程', '个人<br>信息', '退出<br>登录'],
  src: ['', '/patient/process', '/patient/history', '/patient/pDetail', '/',]
})

async function shrinkBack(index: number) {
  if(index == FunctionTitle.src.length - 1) {
    setToken('')
    setRole('')
  }
  if(index == 0) {
    const res = await reqReport(axiosReq)
    if(res == 200) {
      actOK(res.message)
    } else {
      actErr(res.message)
    }
  } else {
    nav(FunctionTitle.src[index])
  }
}
</script>

<style scoped>
.fctCard {
  width: 150px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  border-radius: 50%;
  height: 150px;
  margin: 3vw;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.3);
}

.fctCard:hover {
  transform: scale(1.0);
  /* 鼠标悬停时放大 1.1 倍 */
  box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.5);
}

.svg g {
    transform-origin: 90px 90px;
    transition: all 0.2s linear;
}
.line {
    clear: both;
    width: 100%;
    height: 4px;
    margin-bottom: 20px;
    background: #CCC4B0;
}
/*Medical Square css begin*/
#svg-medical-square .cls-1 {
    fill: none;
    stroke: #bcbec0;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}
#svg-medical-square .cls-2 {
    fill: #bcbec0;
}
#svg-medical-square .cls-3 {
    fill: #414141;
}
#svg-medical-square .cls-4 {
    fill: #c4c4c4;
}
#svg-medical-square .cls-5 {
    fill: #d42d27;
}
#svg-medical-square .cls-6 {
    fill: #f5f5f5;
}
#svg-medical-square-g-01 {
    transform: rotate(30deg);
}
.svg:hover #svg-medical-square-g-01 {
    transform: rotate(120deg);
}
/*Medical Square css end*/

/*Articles css begin*/
#svg-articles .cls-1 {
    fill: #fbca62;
}
#svg-articles .cls-2 {
    fill: #ededed;
}
#svg-articles .cls-3 {
    fill: #dcdbdb;
}
#svg-articles .cls-4 {
    fill: #414141;
}
#svg-articles .cls-5 {
    fill: #d1d3d4;
}
#svg-articles .cls-6 {
    fill: #fff;
}
#svg-articles .cls-7 {
    fill: #f36e41;
}
#svg-articles .cls-8 {
    fill: #e6e5e5;
}
#svg-articles .cls-10,
#svg-articles .cls-9 {
    fill: none;
    stroke-miterlimit: 10;
}
#svg-articles .cls-9 {
    stroke: #a7a9ac;
}
#svg-articles .cls-10 {
    stroke: #9cceee;
}
#svg-articles .cls-11 {
    fill: #5eb8e8;
}
#svg-articles-g-02 {
    transform: translateY(33px);
}
.svg:hover #svg-articles-g-02 {
    transform: translateY(-33px);
}
/*Articles css end*/

/*Corporate Site css begin*/
#svg-corporate-site .cls-1 {
    fill: #dcdbdb;
}
#svg-corporate-site .cls-2 {
    fill: #9cceee;
}
#svg-corporate-site .cls-3,
#svg-corporate-site .cls-4 {
    fill: none;
    stroke-miterlimit: 10;
    stroke-width: 4px;
}
#svg-corporate-site .cls-3 {
    stroke: #9cceee;
}
#svg-corporate-site .cls-4 {
    stroke: #f26a50;
}
#svg-corporate-site-g-01 {
    transform: translate(0, 0) rotate(0) scale(1);
}
#svg-corporate-site-g-02 {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
}
#svg-corporate-site-g-03 {
    transform: translate(0, 0) rotate(0);
    opacity: 0;
}
.svg:hover #svg-corporate-site-g-01 {
    transform: translate(-5px, 20px) rotate(-30deg) scale(0.8);
}
.svg:hover #svg-corporate-site-g-02 {
    transform: translate(-5px, 15px) rotate(-20deg);
    opacity: 0;
}
.svg:hover #svg-corporate-site-g-03 {
    transform: translate(-5px, 15px) rotate(-20deg);
    opacity: 1;
}
/*Corporate Site css end*/

/*Digital Tool css bgin*/
#svg-digital-tool .cls-1 {
    fill: #ffd99c;
}
#svg-digital-tool .cls-2 {
    fill: #555;
}
#svg-digital-tool .cls-3 {
    fill: #414141;
}
#svg-digital-tool .cls-4 {
    fill: #5eb8e8;
}
#svg-digital-tool .cls-5 {
    fill: #fff;
}
#svg-digital-tool-g-01 .cls-4 {
    fill: #F66D43;
    transition: all 0.2s linear;
}
#svg-digital-tool-g-02 {
    opacity: 1;
}
#svg-digital-tool-g-03 {
    opacity: 0;
}
#svg-digital-tool-g-04 {
    transform: translate(0, 0) rotate(0);
}
.svg:hover #svg-digital-tool-g-01 .cls-4 {
    fill: #5eb8e8;
}
.svg:hover #svg-digital-tool-g-02 {
    opacity: 0;
}
.svg:hover #svg-digital-tool-g-03 {
    opacity: 1;
}
.svg:hover #svg-digital-tool-g-04 {
    transform: translate(-8px, 15px) rotate(-30deg);
}
/*Digital Tool css end*/
</style>
<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
